import React, {Component} from 'react';
import NavigationBar from '../../Common/NavigationBar/NavigationBar.jsx'
import WeUI from 'react-weui';
import 'whatwg-fetch';
import EXIF from '../../../assets/js/exif.js';
const {
    CellFooter,
    CellsTitle,
    Cells,
    Cell,
    CellBody,
    Input,
    ButtonArea,
    Button,
    TextArea,
    Toptips,
    Toast,
    NavBar,
    NavBarItem,
    Dialog,
    Tab,
    Select,
    CellHeader,
    Label
} = WeUI;
import 'react-weui/build/dist/react-weui.css';
import {CSS} from '../styles/CreateTeamStyle.css';
import $ from 'jquery';
var orientation = -1;
let height = document.body.clientHeight;
export default class CreateStaff extends Component {
    constructor(props) {
        super(props);
        this.LeftClick = this.LeftClick.bind(this);
        this.state = {
            showToptips: false,
            showLoading: false,
            showToast: false,
            toastTimer: null,
            topTipsMsg: "服务器错误！",
            showDialog: false,
            dialogStyle: {
                title: "人脸使用说明",
                buttons: [
                    {
                        label: '确定',
                        onClick: this.hideDialog.bind(this)
                    }
                ]
            },
            image: null,
            teamGroupId: this.props.location.query.teamGroupId, //部门id
            teamId: this.props.location.query.teamId,
            role_select:1,
            phoneValue:null,
        }
    }

    hideDialog() {
        this.setState({
            showDialog: false
        })
    }


    showToast() {
        this.setState({showToast: true, showLoading: false});
        this.state.toastTimer = setTimeout(() => {
            this.setState({showToast: false});
            window.location.hash = "/DepartmentInfo?teamGroupId=" + this.state.teamGroupId + "&teamId=" + this.state.teamId;
        }, 2000);
    }

    showWarn(error) {
        this.setState({showToptips: true,topTipsMsg:error, showLoading: false,});
        this.state.warnTimer = setTimeout(() => {
            this.setState({showToptips: false});
        }, 2000);
    }

    componentWillMount() {
        window.addEventListener('resize', this.onWindowResize.bind(this))
    }

    componentDidMount() {

    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.onWindowResize.bind(this))
    }

    LeftClick() {
    }

    //监听键盘弹起
    onWindowResize(){
        let h = document.body.clientHeight;
        if(h < height){
            $(".button_box").hide();
        }else{
            $(".button_box").show();
        }
    }
    //确认添加
    confirmAdd() {
        this.setState({
            showLoading: true
        });
        let staffName = $("#staffName").val();
        if(!staffName){
            this.showWarn("名字不能为空");
            return;
        }
        if(!this.state.phoneValue){
            this.showWarn("电话不能为空");
            return;
        }
        let self = this;
        let fromData = new FormData();
        fromData.append("name", staffName);
        fromData.append("phone",this.state.phoneValue);
        if(this.state.role_select === 1){
            fromData.append("isAdmin",false);
        }else{
            fromData.append("isAdmin",true);
        }
        fetch(getHost() + "/team/group/user/" + this.state.teamGroupId, {
            method: 'POST',
            credentials: 'include',
            body: fromData
        }).then(response => response.json())
            .then(data => {
                if (data.success) {
                    self.showToast();
                } else {
                    self.showWarn(data.error.message);
                }
            }).catch(e => {
            self.showWarn("服务器错误！");
        });
    }

    //确认并添加下一个
    confirmAddNext() {
        this.setState({
            showLoading: true
        });
        let self = this;
        let staffName = $("#staffName").val();
        if(!staffName){
            this.showWarn("名字不能为空");
            return;
        }
        if(!this.state.phoneValue){
            this.showWarn("电话不能为空");
            return;
        }
        let fromData = new FormData();
        fromData.append("name", staffName);
        fromData.append("phone", this.state.phoneValue);
        fetch(getHost() + "/team/group/user/" + this.state.teamGroupId, {
            method: 'POST',
            credentials: 'include',
            body: fromData
        }).then(response => response.json())
            .then(data => {
                if (data.success) {
                    self.setState({showToast: true, showLoading: false});
                    self.state.toastTimer = setTimeout(() => {
                        self.setState({showToast: false});
                        window.location.reload();
                    }, 2000);
                } else {
                    self.showWarn(data.error.message);
                }
            }).catch(e => {
            self.showWarn("服务器错误！");
        });
    }

    selectChange(e){
        this.setState({
            role_select:e.target.value
        })
    }

    //检查电话号码的长度
    checkPhoneValue(e){
        let value =  e.target.value;
        if(value.length <= 11){
            this.setState({
                phoneValue:value
            })
        }
    }

    render() {
        return (
            <div style={{width:"100%",height:"100%"}}>
                <NavigationBar Title="新增员工" LeftBar="true" LeftTitle="返回"
                               LeftIconSrc="/iot-meeting/assets/images/common/nav_back_icon.png" LeftClick={this.LeftClick}/>
                <CellsTitle>请输入员工信息</CellsTitle>
                <Cells style={{background: "white"}}>
                    <Cell>
                        <CellBody style={{height: "2.4rem"}}>
                            <div className="department_title">姓名</div>
                            <Input className="department_input" id="staffName" placeholder="请输入员工姓名" maxLength="20"
                                   defaultValue={""}/>
                        </CellBody>
                        <CellFooter/>
                    </Cell>
                    <Cell>
                        <CellBody style={{height: "2.4rem"}}>
                            <div className="department_title">电话</div>
                            <Input className="department_input" id="staffPhone" type="number"
                                   value={this.state.phoneValue} onChange={this.checkPhoneValue.bind(this)}  placeholder="请输入员工电话"
                                   defaultValue={""}/>
                        </CellBody>
                        <CellFooter/>
                    </Cell>
                    <Cell>
                        <CellHeader>
                            <Label className="role_title">角色</Label>
                        </CellHeader>
                        <CellBody style={{height: "2.4rem"}}>
                            <Select defaultValue={this.state.role_select} className="select_role" onChange={this.selectChange.bind(this)}>
                                <option value="1">员工</option>
                                <option value="2">管理员</option>
                            </Select>
                            <div className="arrows_icon"/>
                        </CellBody>
                        <CellFooter/>
                    </Cell>
                </Cells>
                <div style={{clear:"both"}} />
                <div className="userAccount_tip">电话将作为员工的登录账号，一旦确认不可修改，请谨慎操作!</div>
                <div className="button_box">
                    <ButtonArea direction="horizontal">
                        <Button className="confirmSave_btn" onClick={this.confirmAdd.bind(this)}>确认添加</Button>
                    </ButtonArea>
                    <ButtonArea direction="horizontal">
                        <Button type="default" className="confirmSave_btn"
                                onClick={this.confirmAddNext.bind(this)}>确认并添加下一个员工</Button>
                    </ButtonArea>
                </div>
                <Toast icon="loading" show={this.state.showLoading}>加载中...</Toast>
                <Toast icon="success-no-circle" show={this.state.showToast}>添加成功</Toast>
                <Toptips type="warn" show={this.state.showToptips}>
                    {this.state.topTipsMsg}
                </Toptips>
            </div>
        )
    }
}